@use "./variables" as *;

// Apply theme to the document root.
html {
  &,
  &[data-theme="system"] {
    @media (prefers-color-scheme: light) {
      background-color: $light-background;
      color: $light-foreground;
    }

    @media (prefers-color-scheme: dark) {
      background-color: $dark-background;
      color: $dark-foreground;
    }
  }

  &[data-theme="light"] {
    background-color: $light-background;
    color: $light-foreground;
  }

  &[data-theme="dark"] {
    background-color: $dark-background;
    color: $dark-foreground;
  }
}
